<template>
  <div class="roleClass">
    <div class="role_left">
      <div class="role_top">
        <div>角色类型</div>
        <div>
          <el-button class="el-icon-plus" type="text" @click="addType()"></el-button>
        </div>
      </div>
      <el-tree class="role_tree" :data="roledata" :expand-on-click-node="false" :props="defaultProps" default-expand-all
        highlight-current node-key="id" @node-click="handleNodeClick">
        <span slot-scope="{ node, data }"
          style="width: 100%;display: flex;justify-content:space-between;align-items: center;padding:0 10px">
          <span>{{ node.label }}</span>
          <span>
            <el-button class="el-icon-edit" type="text" @click="() => edit(node, data)"></el-button>
            <el-button class="el-icon-minus" type="text" @click="() => remove(node, data)"></el-button>
            <el-button :style="{ 'visibility': node.level == 2 ? 'hidden' : 'visible' }" class="el-icon-plus"
              type="text" @click="() => append(node, data)"></el-button>
          </span>
        </span>
      </el-tree>
    </div>
    <div class="role_right">
      <div class="role_top">
        <div>角色名称：{{ name }}</div>
        <div>
          <el-button :loading="saveLoading" type="primary" size="small" @click="save()">保存</el-button>
        </div>
      </div>
      <el-tree class="tree_name" ref="tree" :data="data2" :props="defaultProps2" node-key="menuUuid" show-checkbox>
      </el-tree>
    </div>

    <!-- 添加编辑角色类型 -->
    <el-dialog v-dialogDrag :title="title" :visible.sync="dialogVisible" width="500px">
      <el-form ref="ruleForm" :model="ruleForm" :rules="rule" label-width="100px">
        <el-form-item label="角色名" prop="roleName">
          <el-input v-model="ruleForm.roleName" autocomplete="off" placeholder="请输入角色名"></el-input>
        </el-form-item>
        <el-form-item label="显示排序" prop="sort">
          <el-input v-model.number="ruleForm.sort" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false"> 取 消</el-button>
        <el-button type="primary" @click="submit('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: 'role',
  data() {
    return {
      data2: [],//菜单数据
      defaultProps2: {
        children: 'childMenu',
        label: 'menuName'
      },
      name: '',
      roleUuid: null,
      saveLoading: false,
      loading: false,
      //角色树数据
      roledata: [],
      defaultProps: {
        children: 'childRole',
        label: 'roleName'
      },

      // 角色类型编辑
      title: '',
      dialogVisible: false,
      ruleForm: {
        roleName: "",
        sort: null,
      },
      rule: {
        roleName: [
          { required: true, message: '角色名不能为空', trigger: 'blur' }
        ],
      },
    };
  },
  props: {},

  components: {},

  created() { },

  mounted() {
    this.getTreeData()
    this.getData()
  },

  beforeDestroy() { },


  methods: {
    //重置树选择
    resetChecked() {
      this.$refs['tree'].setCheckedKeys([])
    },
    //角色树数据
    getTreeData() {
      this.loading = true;
      this.sendPost('/role/list').then(res => {
        if (res.errcode == 0) {
          this.roledata = res.data.voList;
        } else {
          this.err({ message: res.errmsg });
        }
        this.loading = false;
      })
    },
    //获取菜单数据
    getData() {
      this.loading = true;
      this.sendPost('/menu/list', {}).then(res => {
        if (res.errcode == 0) {
          this.data2 = res.data.voList;
          this.resetChecked()
        } else {
          this.err({ message: res.errmsg });
        }
        this.loading = false;
      })
    },
    handleNodeClick(node, e) {
      if (e.level == 1) {
        this.name = '';
        this.roleUuid = null;
      } else if (e.level == 2) {
        this.name = node.roleName
        this.roleUuid = node.roleUuid
        this.sendGet('/role/getMenuByRoleId', { roleUuid: this.roleUuid }).then((res) => {
          if (res.errcode == 0) {
            this.resetChecked()
            if (res.data) {
              this.$refs['tree'].setCheckedKeys(res.data)
            }
          } else {
            this.err({ message: res.errmsg })
          }
        }).catch((error) => {
          console.log(error)
        })
      }
    },
    remove(node, data) {
      console.log(node)
      this.$confirm(node.level == 1 ? '删除此角色分类？' : '删除此角色?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.sendGet('/role/delete', { id: data.id }).then(res => {
          if (res.errcode == 0) {
            this.suc({ message: res.errmsg })
            this.getTreeData()
          } else {
            this.err({ message: res.errmsg })
          }
        })
      }).catch(() => {
        this.$message({ type: 'info', message: '已取消删除' });
      });
    },
    edit(node, data) {
      this.title = node.level == 1 ? '编辑角色分类' : '编辑角色';
      this.ruleForm = JSON.parse(JSON.stringify(data));
      this.dialogVisible = true;
    },
    addType() {
      this.title = '新增角色类型'
      this.dialogVisible = true;
      this.ruleForm = {
        sort: this.roledata.length + 1
      };
    },
    append(node, data) {
      this.title = '新增角色'
      this.dialogVisible = true;
      this.ruleForm = {
        parentUuid: data.roleUuid,
      };
    },
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // console.log(this.ruleForm)
          this.sendPost('/role/insertOrUpdateRole', this.ruleForm).then(res => {
            if (res.errcode == 0) {
              this.getTreeData()
            } else {
              this.err({ message: res.errmsg });
            }
            this.dialogVisible = false;
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //给角色赋予菜单权限
    save() {
      if (!this.roleUuid) {
        this.err({ message: '请先选择角色' })
      } else {
        let datas = [];
        let treeData = this.$refs['tree'].getCheckedNodes(false, true)
        treeData.map(e => {
          datas.push(e.menuUuid)
        })
        this.saveLoading = true;
        let data = {
          roleUuid: this.roleUuid,
          menuUuids: datas
        }
        console.log(data)
        this.sendPost('/role/insertRoleMenu', data).then((res) => {
          if (res.errcode == 0) {
            this.suc({ message: res.errmsg })
          } else {
            this.err({ message: res.errmsg })
          }
          this.saveLoading = false;

        })
      }
    }

  },

  computed: {},

  watch: {},

  directives: {},

  filters: {}
};
</script>

<style scoped lang="scss">
.roleClass {
  display: flex;
  width: 100%;
  height: 100%;

  .role_left {
    width: 30%;
    height: 100%;
    margin-right: 3%;

    .role_tree {
      width: 100%;
      height: calc(100% - 50px);
      overflow: auto;
    }
  }

  .role_right {
    width: 30%;
    height: 100%;

    .tree_name {
      height: calc(100% - 50px);
      overflow: auto;
      padding: 0 8px;
    }
  }

  .role_top {
    display: flex;
    justify-content: space-between;
    height: 40px;
    background: #fff;
    line-height: 40px;
    margin-bottom: 10px;
    padding: 0 8px;
    border-radius: 10px;
  }
}
</style>
